/**
 * Created by tdzl2003 on 6/24/16.
 */

import React, { PropTypes } from 'react';

import {
  StyleSheet,
  TouchableWithoutFeedback,
  Dimensions,
  View,
  Navigator,
  Text,
} from 'react-native';

import { Form, Submit } from '../../components/form/react-native';

import DialogButton from './components/DialogButton';

const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCENE_DISABLED_NATIVE_PROPS = {
  pointerEvents: 'none',
  style: {
    top: SCREEN_HEIGHT,
    bottom: -SCREEN_HEIGHT,
    opacity: 0,
  },
};

// Hook navigator method
function hookedDisableScene(sceneIndex) {
  const sceneConstructor = this.refs[`scene_${sceneIndex}`];
  const nextRoute = this.state.routeStack[sceneIndex + 1];

  if (nextRoute && nextRoute.isModal) {
    sceneConstructor.setNativeProps({
      pointerEvents: 'none',
    });
  } else {
    sceneConstructor.setNativeProps(SCENE_DISABLED_NATIVE_PROPS);
  }
}

/* eslint-disable no-underscore-dangle */
/* eslint-disable no-param-reassign  */
export function hookNavigator(navigator) {
  if (!navigator._hookedForDialog) {
    navigator._hookedForDialog = true;
    navigator._disableScene = hookedDisableScene.bind(navigator);
  }
}

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  overlay: {
    position: 'absolute',
    width,
    height,
    backgroundColor: 'rgba(0,0,0,0.6)',
  },
  background: {
    borderRadius: 10,
    backgroundColor: 'white',
    alignSelf: 'stretch',
  },
  titleBg: {
    alignSelf: 'stretch',
    backgroundColor: 'rgb(249,249,249)',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: 55,
    borderRadius: 5,
  },
  title: {
    fontSize: 17,
  },
  buttonList: {
    backgroundColor: 'rgb(249,249,249)',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
  },
  seperator: {
    width: StyleSheet.hairlineWidth,
    alignSelf: 'stretch',
    backgroundColor: 'rgb(234,234,234)',
  },
});

export default class Dialog extends React.Component {
  static contextTypes = {
    navigator: PropTypes.object,
  };
  static propTypes = {
    ...View.propTypes,
    title: PropTypes.string,
    onConfirm: PropTypes.func,
    onCancel: PropTypes.func,
  };

  static sceneConfig = Navigator.SceneConfigs.FloatFromBottom;

  componentWillMount() {
    hookNavigator(this.context.navigator);
  }
  confirm = values => {
    const { onConfirm } = this.props;
    if (onConfirm) {
      onConfirm(values);
    }
    this.context.navigator.pop();
  };

  cancel = () => {
    const { onCancel } = this.props;
    if (onCancel) {
      onCancel();
    }
    this.context.navigator.pop();
  };

  render() {
    const { children, style, ...others, title } = this.props;
    return (
      <Form onSubmit={this.confirm}>
        <View
          style={[styles.container, style]}
          {...others}
        >
          <TouchableWithoutFeedback
            onPress={this.cancel}
          >
            <View style={styles.overlay} />
          </TouchableWithoutFeedback>
          <View style={styles.background}>
            {
              title ? (
                <View style={styles.titleBg}>
                  <Text style={styles.title}>
                    {title}
                  </Text>
                </View>
              ) : null
            }
            {children}
            <View style={styles.buttonList}>
              <Submit>
                <DialogButton type="confirm" label="确定" />
              </Submit>
              <View style={styles.seperator} />
              <DialogButton type="cancel" label="取消" onPress={this.cancel} />
            </View>
          </View>
        </View>
      </Form>
    );
  }
}

